
import MainPage from "./pages/MainPage"
import LoginPage from "./pages/LoginPage"
import ProductsPage from "./pages/ProductsPage"

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import MyWebView from "./pages/WebView"

import * as React from 'react';
import { Text, View, Image } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';


import { store } from "./store/index";
import { Provider } from "react-redux";


const Tab = createBottomTabNavigator();

function Home() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        headerStyle: { backgroundColor: "#f4511e" },
        tabBarIcon: ({ focused, color, size }) => {
          let iconUrl
          if (route.name == "Home") {
            iconUrl = focused ? require("./public/image/selected/home.png")
              : require("./public/image/normal/home.png")
          } else if (route.name == "Product") {
            iconUrl = focused ? require("./public/image/selected/fenlei.png")
              : require("./public/image/normal/fenlei.png")
          } else if (route.name == "Login") {
            iconUrl = focused ? require("./public/image/selected/user.png")
              : require("./public/image/normal/user.png")
          }
          return <Image source={iconUrl} style={{ height: size, width: size }} />

        },
        tabBarActiveTintColor: '#D4237A',
        tabBarInactiveTintColor: 'gray',
      })}
    >
      <Tab.Screen name="Home" options={{ title: "首页" }} component={MainPage} />
      <Tab.Screen name="Product" options={{ title: "书签" }} component={ProductsPage} />
      <Tab.Screen name="Login" options={{ title: "我的" }} component={LoginPage} />

    </Tab.Navigator>
  );
}

const Stack = createNativeStackNavigator()
export default class App extends React.Component {

  render() {
    return (
      <Provider store={store}>
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen name="home" component={Home} options={{ headerShown: false }} />
            <Stack.Screen name="MyWebView" component={MyWebView} />
          </Stack.Navigator>
        </NavigationContainer>
      </Provider>
    )
  }
}